<template>
	<view class="container">
		<view class="tabbar">
			<image class="tabbar-image" src="https://app.yycjkb.cn/index/fujiajia/tabbar.png" mode=""></image>
			<view 
				:class="['tabbar-item', {'tab-active': index === currentIndex}]" 
				v-for="(item, index) in tabList"
				:key="index" 
				@tap="switchTab(index)"
			>
				<image 
					:src="index === currentIndex ? item.selectedIconPath : item.iconPath" 
					class="tab-img"
				/>
				<view :class="['tabbar-text', {'tabbar-text-active': index === currentIndex}]">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		currentIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			tabList: [
				{
					iconPath: "/static/tabbar/home.png",
					selectedIconPath: "/static/tabbar/home-select.png",
					title: "首页",
					path: "/pages/home/index",
					isTab: true
				},
				{
					iconPath: "/static/tabbar/class.png",
					selectedIconPath: "/static/tabbar/class-select.png",
					title: "分类",
					path: "/pages/classify/classify",
					isTab: true
				},
				{
					iconPath: "/static/tabbar/my.png",
					selectedIconPath: "/static/tabbar/my-select.png",
					title: "我的",
					path: "/pages/my/index",
					isTab: true
				}
			]
		};
	},
	methods: {
		switchTab(index) {
			const target = this.tabList[index];
			if (target.isTab) {
				uni.reLaunch({ 
					url: target.path,
					success: () => {
						this.$emit('update:currentIndex', index);
					}
				});
			} else {
				uni.navigateTo({
					url: target.path,
					success: () => {
						this.$emit('update:currentIndex', index);
					}
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.tabbar {
	position: fixed;
	height: 178rpx;
	width: 750rpx;
	z-index: 999;
	bottom: 0%;
	left: 0%;
	display: flex;
	align-items: center;
}

.tabbar-image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	bottom: 0%;
	z-index: -1;
}

.tabbar-item {
	z-index: 16;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 33.33%;
	float: left;
	padding: 10rpx 0;
}

.tab-img {
	width: 48rpx;
	height: 48rpx;
	transition: opacity 0.3s;
}

.tabbar-text {
	margin-top: 10rpx;
	font-size: 24rpx;
}

.tabbar-text-active {
	color: #ff9b45;
}
</style>